Assign a Template to a ListView

The ListView Control allows you to display a list or table so that you can display data from multiple records in a single Control. The row format for a ListView is defined within a Template. When you associate a Template with a ListView Control, each row within the ListView will follow the format defined within the Template. You can assign an individual Template to more than one ListView, if both lists will display the same data items.

 

To assign a Template to a ListView:

Create a form on which you want to place the ListView, or open an existing form.

If you haven't already placed the ListView on the form, open the Toolbox Pane and drag a ListView Control from the Toolbox and drop it on the form.

Position and size the Control as required.

If the Control isn't currently selected, select the Control to display its Properties in the Properties Pane.

Within the Properties, under the Control category, click on the Row Template Property. This Property allows you to assign a Template to the ListView. Drop down the list and select the required Template. The Control on the form will change to give you an idea of what the list will look like on the device.

 

On the Android Platform, the Template will be scaled automatically to fit within the width of the Control if necessary. The Template width will be resized to fit within the Control but its height will remain the same.

On other Platforms, the Template will be displayed in the ListView Control at its actual size.

 

If you want to change the width of the Control so that it exactly fits the Template, select the Control, if not already selected, and then choose Size to Content from the Layout group of the Ribbon's Design tab. This will resize the Control's width to fit the original Template's dimensions rather than resizing the Template to fit the Control, so that the Template's width and height are not adjusted.

If on an Android Platform the Control now appears on the form to be wider than you expected, this is probably because the representation has to allow for elements of the Control which may be required at runtime such as Scroll bars and borders. These make the Control wider than just the width of the Panel when it is displayed on an actual device.

  • If choosing Size to Content causes the Control to stretch beyond the form's edges, you can resize the Control manually to bring it back within the form's boundaries. If when you try to resize the Control, the size doesn't change, you may need to check the Grid settings for the form. Right-click on the form's background and choose Grid Settings. Check whether Restrict controls to form boundary is selected, and, if so, uncheck the check box and then click on the OK button. You should now be able to bring the Control back within the form's boundaries. You can then reselect the option again if you want to return to being unable to size a Control beyond the edges of the form.

 

Another feature, Fit To Control, allows you to resize both the width and height of the actual Template Panel itself so that the Template fits the Control's width and when displayed within the Control the Template doesn't have to be resized. You can use this option to match the size of the Template Panel to your Control to save you having to work out the required size of the Panel yourself. The option will scale the width of the Template's Panel to fit within the width of the Control and then scale the height of the Panel in the same ratio.

To use this option, first assign the Template to the Control and then select the Control. Click on Fit To Control in the Template group of the Ribbon's Design tab. You will now probably need to go back into the Template and adjust the size and position of the Controls within the resized Panel.

 

You can also adjust the size of the Panel to make it the same width as the ListView Control by manually editing the Properties of the Panel. You may need to allow for scroll bars and other elements and make the Panel a little smaller than the full width of the Control. You may also need to re-adjust the Controls within the Panel after changing the size.

 

Finally, you can choose whether devices with touch screens should highlight the row which is selected within the list. This option is controlled by the ListView's Show Selection in Touch Mode Property. Changing the value of this Property, will be reflected in the display of the ListView on your form within App Studio.

This Property can be set to True or False (default value) and has the following effects on the different Platforms:

True

A Radio Button will be added to the right-hand end of each row. The user can select a row by tapping the appropriate Radio Button. The currently selected row's Radio Button has a green dot in the centre.

 

False

Radio Buttons are not displayed. Users can select a row in the standard manner for the device but the currently selected row is not highlighted.

 

True

A blank column will be added to the end of each row and a user can select a row by tapping on it. A tick symbol will be displayed in this column to indicate the currently selected row.

 

False

The final column is not included. Users can select a row in the standard manner for the device but the currently selected row is not highlighted.

 

The value of this option is ignored and the current selection is always shown.